<template>


<div>
<!-- hot -->
      <div class="hot">
      <div class="hot-title">热门城市</div>

      <ul class="hot-list">
          <li class="hot-item" v-for="item in hotCities" :key="item.id" @click="changeCityName(item.name)">{{item.name}}</li>
      </ul>
      </div>

<div class="sort">
      <div class="sort-title">字母排序</div></div>
<div class="hjj">
  <van-index-bar>
  <van-index-anchor  class="list-msg" v-for="(val,key) in cities" :key="val" :index='key'>
      <div class="list-title">{{key}}</div>

       <van-cell class="list-item" v-for="item in val" :key="item.id" @click="changeCityName(item.name)">
          {{item.name}}
       </van-cell>
         </van-index-anchor>
   </van-index-bar>
</div>
</div>

</template>

<script>
import { mapMutations } from "vuex";
export default {
  props: ["hotCities", "cities"],
  data() {
    return {
      key: [],
      val: []
    };
  },
  methods: {
    changeCityName(cityName) {
      this.changeCity(cityName);
      this.$router.push("/");
    },
    ...mapMutations(["changeCity"])
  }
};
</script>

<style lang="less" scoped>
@import "../../../assets/css/common.less";

// list

.van-index-bar {
  /deep/ .van-index-bar__index {
    word-wrap: break-word;
    font-size: 0.28rem;
  }
  /deep/ .van-index-bar__sidebar {
    position: static;
    display: inline;
    color: #212121;
    border-bottom: 0.02rem solid #ddd;
  }
}

.list-title {
  font-size: 0.24rem;
  color: #212121;
  padding: 0.2rem 0.3rem;
}
.list-msg {
  background: #fff;
  overflow: hidden;
  margin-top: 0.8rem;
}

.list-item {
  width: 25%;

  text-align: center;

  float: left;
  border-bottom: 0.02rem solid #ddd;
  .textOverflow;
}

// hot
.hot-title {
  font-size: 0.24rem;
  color: #212121;
  padding: 0.2rem 0.3rem;
}
.hot-list {
  height: 100%;
  position: relative;
  background: #fff;
  font-size: 0.28rem;
  color: #212121;
  overflow: hidden;
}
.hot-list:before {
  content: " ";
  position: absolute;
  height: 100%;
  width: 33.33333%;
  left: 33.33333%;
  border-left: 0.02rem solid #ddd;
  border-right: 0.02rem solid #ddd;
}
.hot-item {
  position: relative;
  width: 33.33333%;
  text-align: center;
  height: 0.9rem;
  line-height: 0.9rem;
  float: left;
  border-bottom: 0.02rem solid #ddd;
}

// sort
.sort-title {
  font-size: 0.24rem;
  color: #212121;
  padding: 0.2rem 0.3rem;
}
</style>

